<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*div{*/
              /*
              先设置边框，然后在设置边框图片
              */
            /*width: 100px;*/
            /*height: 100px;*/
            /*border: 12px solid red;*/
            /*border-image-source: url("img/border.png");*/
            /*border-image-slice: 33%;*/
            /*border-image-repeat: repeat;*/
            /**/
        /*}*/
          div{
              width: 100px;
              height: 30px;
              font-size: 14px;
              border: 10px solid red;
              border-image-source: url("img/border_image_button.png");
              border-image-slice: 0  14  0  14;
              border-image-repeat: round;


          }
        
        
    </style>
</head>
<body>
          <div>这是一个盒子</div>

      <!--
         css3：
         （1）边框
            boder-radius:设置圆角
            1个值  2个值   3个值   4个值
            左上角：border-top-left-radius
            当水平半径跟垂直半径不一致的时候
            border-top-left-radius：10px 20px;
            boder-radius:10px/20px 10px/20px;

          border-image:设置图片边框
            boder-image-source:url()-----图片的路径
            border-image-width
            border-image-slice----裁剪图片设置边框（九宫格的原则）
            border-image-ouset----边框向外扩展
            border-image-repeat---平铺（round）  重复（repeat） 拉伸stretch

          (2)background:
                  background-size:设置背景图片的大小（具体的值，百分比） cover  contain
                  当background-size：20%；第二个值自动设置成zuto
                  cover：一直扩大足够填满整个背景区域，有可能背景图片显示不全
                  contain：扩大大最大的尺寸，有可能填不满

                  background-clip:裁剪（边框   内边框    内容）
                  background-orign:设置起始位置，跟position搭配使用
         （3）盒子阴影
             box-shadow:
            浏览器的兼容性问题----加前缀
            文本阴影
            text-shadow(阴影的显示位置，阴影大小，阴影的颜色)
          （4）文本效果
             word-wrap:设置长单词是否换行
            @font-face-----设置服务器上面的字体，设置浏览器的字体
          （5）透明度
                 opacity:(0----1)
                 rgba()
                filter:alpha(opacity=20) ;-----0-100(ie9以下)
         （6）用户可以调整元素的大小
             resize:
             overflow:auto

      -->

</body>
</html>